{% extends 'IcsocUIBundle::base.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@colorbox_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    {#<a href="{{ 'bundles/icsocui/images/gallery/image-1.jpg' | imagine_filter('icsoc_large') }}" data-rel="colorbox">#}
        {#<img alt="image1" src="{{ 'bundles/icsocui/images/gallery/thumb-1.jpg' | imagine_filter('icsoc_medium') }} " />#}
    {#</a>#}
    <a href="path/to/image2" data-rel="colorbox">
        <img alt="image2" src="path/to/thumb2" />
    </a>
{% endblock %}
{% block footer %}
    {% javascripts
    '@colorbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        var colorbox_params = {
            rel: 'colorbox',
            reposition: true,
            scalePhotos: true,
            scrolling: false,
            previous: '<i class="ace-icon fa fa-arrow-left"></i>',
            next: '<i class="ace-icon fa fa-arrow-right"></i>',
            close: '&times;',
            current: '{current} of {total}',
            maxWidth: '100%',
            maxHeight: '100%',
            onComplete: function(){
                $.colorbox.resize();
            }
        }
        $('[data-rel="colorbox"]').colorbox(colorbox_params);
        $('#cboxLoadingGraphic').append("<i class='ace-icon fa fa-spinner orange'></i>");
    </script>
{% endblock %}